<template>
    <div>
        <el-drawer v-model="isShow" :title="title" :direction="direction" @close="closeHandler" modal show-close with-header
            size="40%">
            <!-- 头部 -->
            <template #header>
                <h4>添加车辆信息</h4>
            </template>

            <!-- 身体 -->
            <template #default>
                <el-row>
                    <el-form :model="formData" ref="formRef" :rules="formRules" label-width="80px" :inline="true">
                        <el-col :span="12">
                            <el-form-item label="所属小区" prop="community_code">
                                <el-select v-model="formData.community_code" @change="changeValue" placeholder="请选择"
                                    clearable filterable>
                                    <el-option v-for="item in allCommunityList" :key="item.id" :value="item.code"
                                        :label="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="所属房产" prop="house_code">
                                <el-select v-model="formData.house_code" @change="changeHouse" placeholder="请选择" clearable
                                    filterable>
                                    <el-option v-for="item in houseList" :key="item.id" :value="item.code"
                                        :label="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="宠物名称" prop="name">
                                <el-input placeholder="请输入" v-model="formData.name"></el-input>
                            </el-form-item>

                            <el-form-item label="收养时间" prop="adopt_time">
                                <el-date-picker v-model="formData.adopt_time" type="date" placeholder="请选择时间"
                                    :size="size" />
                            </el-form-item>

                            <el-form-item label="宠物照片" prop="photo">
                                <ImageUpload v-model="formData.photo" :limit="1" :type="'pet'" />
                            </el-form-item>

                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="所属栋数" prop="building_code">
                                <el-select placeholder="请选择" @change="changeBuild" v-model="formData.building_code"
                                    clearable filterable>
                                    <el-option v-for="item in buildingList" :key="item.id" :value="item.code"
                                        :label="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="所属成员" prop="member_id">
                                <el-select placeholder="请选择" v-model="formData.member_id" clearable filterable>
                                    <el-option v-for="item in memberList" :key="item.id" :value="item.id"
                                        :label="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="宠物颜色" prop="color">
                                <el-input placeholder="请输入" v-model="formData.color"></el-input>
                            </el-form-item>

                            <el-form-item label="备注" prop="remark">
                                <el-input placeholder="请输入" v-model="formData.remark"></el-input>
                            </el-form-item>

                        </el-col>

                    </el-form>
                </el-row>
            </template>

            <!-- 底部 -->
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="isShow = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </div>
            </template>

        </el-drawer>
    </div>
</template>

<script setup>
import { reactive, ref, toRaw } from 'vue'
import { ElMessage } from 'element-plus';
import { getPetInfoApi, addPetInfoApi, delPetInfoApi, editPetInfoApi } from '@/api/pet.js'
import { getBuildingApi } from '@/api/community.js'
import { useAllCommunityList, useBuildingList, useHouseList } from '@/hooks/index.js'
import { getBuildListApi, getMemberListApi } from '@/api/vehicle.js'

// ====================================

// 抽屉控制变量
const isShow = ref(false)
const formRef = ref()
const allCommunityList = useAllCommunityList()
const buildingList = ref([])
const houseList = ref([])
const memberList = ref([])
const emit = defineEmits(['updateList'])


// =====================================

// 表单数据
const defaultData = () => ({
    building_code: "",
    color: "",
    community_code: "",
    house_code: "",
    license_plate: "",
    member_id: null,
    name: "",
    photo: "",
    remark: ""
})

const formData = ref(defaultData())

// 表单校验规则
const formRules = {
    community_code: [{ required: true, message: '请选择', trigger: 'blur' }],
    building_code: [{ required: true, message: '请选择', trigger: 'blur' }],
    house_code: [{ required: true, message: '请选择', trigger: 'blur' }],
    member_id: [{ required: true, message: '请选择', trigger: 'blur' }],
    color: [{ required: true, message: '请输入', trigger: 'blur' }],
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    license_plate: [{ required: true, message: '请输入', trigger: 'blur' }],
}

// 标题
const title = computed(() => {
    formData.id ? '修改宠物信息' : '添加宠物信息'
})

// 提交事件
const onSubmit = async () => {
    try {
        // 1. 表单校验
        await formRef.value.validate()

        formData.value.adopt_time = +new Date(formData.value.adopt_time)

        formData.value.id ? await editPetInfoApi(toRaw(formData.value)) : await addPetInfoApi(toRaw(formData.value))

        ElMessage.success('操作成功')

        isShow.value = false

        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}

// 关闭事件
const closeHandler = () => {
    // 移除表单校验
    formRef.value.resetFields()
    // 重置表单数据
    formData.value = defaultData()
    // Object.assign(formData, { ...defaultData })
}

// 数据回显
const replyData = async (id) => {
    // console.log(id);
    let res = await getPetInfoApi(id)
    // console.log(res);
    formData.value = res.data
    isShow.value = true
}

// 
const changeValue = async (val) => {
    formData.building_code = null
    let res = await getBuildingApi(val)
    // console.log(res);
    buildingList.value = res.data
}

const changeBuild = async (val) => {
    formData.value.house_code = null
    let res = await getBuildListApi(val)
    console.log(res);
    houseList.value = res.data
}

const changeHouse = async (val) => {
    formData.value.member = null
    let res = await getMemberListApi(val)
    console.log(res);
    memberList.value = res.data
}



defineExpose({
    isShow,
    replyData
})

</script>

<style lang="scss" scoped></style>
